<template>
    <div>
        <div class="container">
            <h1>滞留包裹</h1>
            <el-divider></el-divider>
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-search"></el-button>
                <el-select
                    v-model="select_day"
                    slot="prepend"
                    placeholder="请选择"
                    clearable
                    @change="select_change"
                    @clear="index_info"
                    style="width: 150px"
                >
                    <el-option label="滞留一天" value="1"></el-option>
                    <el-option label="滞留两天" value="2"></el-option>
                    <el-option label="滞留三天" value="3"></el-option>
                    <el-option label="滞留四天" value="4"></el-option>
                    <el-option label="滞留五天" value="5"></el-option>
                    <el-option label="滞留六天" value="6"></el-option>
                </el-select>
                <el-button type="primary" style="margin-left: 75%" @click="inform_all" icon="el-icon-phone">一键通知</el-button>
            </div>

            <el-table
                :data="importInfo.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                @selection-change="handleSelectionChange"
                stripe
                v-loading="loading"
                style="width: 100%"
            >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="序号" type="index" width="50"> </el-table-column>
                <el-table-column label="快递单号" prop="express_id"> </el-table-column>
                <el-table-column label="取货码" sortable prop="take_code">
                    <template slot-scope="scope">
                        <el-tag type="primary" effect="plain"> {{ scope.row.take_code }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="入库时间" sortable prop="import_time"> </el-table-column>
                <el-table-column label="状态" prop="state">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state === 1" type="success">在库</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="inform_confirm(scope.row)" type="text" size="small">通知</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[30, 45, 60, 75]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="length"
                style="margin-left: 35%; margin-top: 20px"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    // vue名字
    name: 'Export',
    // 数据
    data() {
        return {
            // disabled_confirm: true,
            //滞留天数
            select_day: '',
            loading: false,

            //分页
            currentPage: 1,
            pagesize: 10,
            length: 0,

            importInfo: [],
            takeNotice: {
                day: '',
                imports: [],
                anImport: {}
            }
        };
    },
    // 方法
    methods: {
        //一键通知所有
        inform_all() {
            this.loading = true;
            this.takeNotice.day = this.select_day;
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'import/takeNotice',
                data: JSON.stringify(this.takeNotice),
                headers: { 'Content-Type': 'application/json' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.loading = false;
                        _this.$notify({
                            title: '成功',
                            message: '通知成功！',
                            type: 'success'
                        });
                    } else {
                        _this.loading = false;
                        _this.$notify.error({
                            title: '错误',
                            message: '通知失败！'
                        });
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        //单件通知
        inform_confirm(row) {
            if (this.select_day) {
                this.loading = true;
                this.takeNotice.day = this.select_day;
                this.takeNotice.anImport = row;
                const _this = this;
                this.$axios({
                    method: 'POST',
                    url: 'import/takeNotice',
                    data: JSON.stringify(this.takeNotice),
                    headers: { 'Content-Type': 'application/json' } //加上这个
                })
                    .then(function (res) {
                        console.log(res);
                        if (res.data.code == 1) {
                            _this.loading = false;
                            _this.$notify({
                                title: '成功',
                                message: '通知成功！',
                                type: 'success'
                            });
                        } else {
                            _this.loading = false;
                            _this.$notify.error({
                                title: '错误',
                                message: '通知失败！'
                            });
                        }
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            } else {
                this.$notify.error({
                    title: '错误',
                    message: '请先选择分类！'
                });
            }
        },
        //下拉框选择天数
        select_change() {
            this.loading = true;
            let param = new URLSearchParams();
            param.append('day', this.select_day);
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'import/queryStrandedPackage',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.loading = false;
                        _this.importInfo = res.data.result;
                    } else {
                        // _this.$message.err('删除失败！');
                        // _this.$message.
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        },
        //表格多选
        handleSelectionChange(val) {
            this.takeNotice.imports = val;
        },

        //分页
        handleSizeChange(val) {
            this.pagesize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        //初始页面
        index_info() {
            this.loading = true;
            let param = new URLSearchParams();
            param.append('day', '1');
            // let day = '1';
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'import/findImport',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.loading = false;
                        _this.importInfo = res.data.result;
                        _this.length = _this.importInfo.length;
                    } else {
                        _this.loading = false;
                        _this.$notify.info({
                            title: '消息提示',
                            message: '暂时没有滞留包裹'
                        });
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        }
    },

    // 页面初始化生命周期函数
    created() {
        this.index_info();
    }
};
</script>
// 样式
<style scoped>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.handle-box {
    margin-bottom: 20px;
    margin-top: 15px;
}
</style>